<template>
	<view class="bgColor">
		<view class="QRcode-box">
			<view class="person-wx" v-if="userInfo">
				<view class="person-wx-user">
					<image class="person-wx-avatar" @click="$fc.previewImagesolo(userInfo.avatar)" :src="userInfo.avatar" mode="aspectFill"></image>
					<view class="person-wx-user-detail">
						<view class="person-wx-nikename">
							<text class="text">{{userInfo.nickname}}</text>
							<view class="wxfont person-wx-nikename-icon" :class="{'nv':userInfo.gender===0}" v-if="userInfo.gender=='0'"></view>
							<view class="wxfont person-wx-nikename-icon" :class="{'nan':userInfo.gender===1}" v-if="userInfo.gender=='1'"></view>
						</view>
						<text class="person-wx-name">
							微聊号：{{userInfo.uid}}
						</text>
					</view>
				</view>
			</view>
			<view class="QRcode-img">
				<!-- <image :src="QRimg" mode="aspectFill" @click="resetQrCode"></image> -->
				 <canvas canvas-id="qrcode" style="width: 150px; margin: 0 auto; margin-top: 20px;"></canvas>
			</view>
			<view class="QRcode-tips">扫一扫上面的二维码图案，加我微聊</view>
		</view>
	</view>
</template>

<script>	
import UQrcode from '../../utils/uqrcode.js';

	export default {
		data() {
			return {
				QRimg:''
			}
		},
		onLoad(e) {
			// this.$http.request({
			// 	url: '/my/getQrCode',
			// 	success: (res) => {
			// 		if (res.data.code == 200) {
			// 			this.QRimg=res.data.data
			// 		}
			// 	}
			// });
			console.info("this.userInfo===>",this.$store.state.userInfo.uid+'');
			this.QRimg = this.$store.state.userInfo.uid+'';
			
			UQrcode.make({
								canvasId: 'qrcode',   //切记canvasId 里边的内容需要跟canvas里边canvas-id="qrcode"的名字一样
								componentInstance: this,
								text: this.QRimg,  //需要转成二维码的内容是后端传过来的，我这里是onLoad传过来的，根                              据自己的需要
								size: 150,
								margin: 0,
								backgroundColor: '#ffffff',
								foregroundColor: '#000000',
								fileType: 'jpg',
								errorCorrectLevel: UQrcode.errorCorrectLevel.H,
								success: res => {}
							})

		},
		computed:{
			userInfo(){
				return this.$store.state.userInfo
			}
		},
		onShow(){},
		methods: {
			resetQrCode(){
				// this.$http.request({
				// 	url: '/my/resetQrCode',
				// 	success: (res) => {
				// 		if (res.data.code == 200) {
				// 			this.QRimg=res.data.data
				// 		}
				// 	}
				// });
				
				//this.QRimg = this.userInfo.uid;
			}
		},
		onNavigationBarButtonTap(e) {
			switch (e.index) {
				case 0:
				uni.showActionSheet({
				    // itemList: ['换个样式', '保存到手机', '扫描二维码', '重置二维码'],
				    //itemList: ['重置二维码', '保存到手机'],
					itemList: [ '保存到手机'],
				    success: (res)=> {
						switch (res.tapIndex) {
							case 2:
							uni.showLoading({title:'重置中'})
							this.resetQrCode()
								break;
							case 0:
							// #ifdef APP-PLUS
							this.$fc.plusSaveBase64Img({base64:this.QRimg})
							// #endif
							// #ifdef H5
							this.$fc.h5SaveBase64Img({base64:this.QRimg})
							// #endif
								break;
							default:
								break;
						}
				    },
				    fail: (res)=> {
				        console.log(res.errMsg);
				    }
				});
					break;
				default:
					break;
			}
		}
	}
</script>

<style scoped>
	/* #ifdef APP-PLUS */
	.bgColor{
	    position: fixed;
	    top: 0;
	    left: 0;
	    right: 0;
	    bottom: 0;
	    background: #EDEDED;
		overflow: auto;
	  }
	/* #endif */
	/* #ifdef H5 */
	page{
		background: #EDEDED;
	}
	/* #endif */
	.QRcode-box{
		width: 666rpx;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		padding: 32rpx;
		background-color: #fff;
		border-radius: 24rpx;
		box-sizing: border-box;
		display: flex;flex-direction: column;
		align-items: center;
	}
	.QRcode-img{
		width: 600rpx;
		height: 600rpx;
	}
	.QRcode-img image{width: 100%;height: 100%;}
	.QRcode-tips{
		margin-top: 6rpx;
		font-size: 26rpx;
		color: #999;
	}
	.person-wx {
		width: 100%;
		margin-bottom: 24rpx;
	}
	
	.person-wx-user {
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	
	.person-wx-avatar {
		width: 120rpx;
		min-width: 120rpx;
		height: 120rpx;
		margin-right: 42rpx;
		border-radius: 16rpx;
	}
	
	.person-wx-user-detail {
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 440rpx;
	}
	
	.person-wx-nikename {
		font-size: 36rpx;
		font-weight: bold;
		display: flex;flex-direction: row;align-items: center;
	}
	.person-wx-nikename .text{
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		max-width: 480rpx;
	}
	.person-wx-name {
		color: #666;
		font-size: 28rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin-top: 12rpx;
	}
	.person-wx-nikename-icon.nan{
		color: #007AFF;
	}
	.person-wx-nikename-icon.nv{
		color: #FF5A5F;
	}
	.person-wx-nikename-icon{
		margin-right: auto;
	}
</style>
